<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创业演示稿</title>
    <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js">
    </script>
    <style>
        #work,#my{display:none};        #new{display: block;}
        html,body,#back{width:100%;height:100%;margin:0;padding: 0;}
        body{
            background-color:rgb(173,124,107);            
        }
        #new .title, #new .cctv, #new .active{
            background-repeat: no-repeat;
            background-size:  100% ;
            /* background-position:center ; */
        }
        #back{width:88%;background-color:white;margin: 0 auto;position: absolute;left: 6%;z-index: -1314520;}
        #tool{
            position: fixed;
            margin: 0 auto;
            /* background-color: black;color:white; */
            font-size: 20px;
            width: 100%;
            left:0;
            bottom: 0;
        }
        #tool div{
            width:33.33%;
            text-align: center;
            float: left;
        }
        /* #tool .new{color:black}#tool .work{color: rgb(85,16,56);}#tool .my{color:red} */
        #tool div:hover{
            background:red;
        }

        #new,#work,#my{
            width:100%;           
        }
        #new .title{
            width:100%;                 
            height:129px;
            /* background: red; */
            margin:0 auto;
            /* background-image: url(./Ntop.jpg);            */
            text-align: center; 
            line-height: 30px; 
        }      
        #new .cctv{
            width:93%;      
            height:300px;                                                                                                                                               ;
            margin:13px auto;
            /* background-image: url(./Nknew.jpg); */
      
            /* background: blue; */
        }
        #new .active{
            width:90%;
            height:200px;
            margin:10px auto;
            /* background-image: url(./Nknative.jpg); */
            /* background:blue; */
        }
        #my .title {
            width: 100%;
            height: 200px;
            margin: 0 auto;            
        }
        #my .title .pic{
            width:30%;            
            border-radius: 27%;
            
        }
        img{
            width:200px;
        }
        #my .title .name{
            width:40%; 
            text-align:center ;          
        }
        #my .title .set{
            width:30%;
            text-align: right;
        }
        #my .title .pic,#my .title .name, #my .title .set{
            height:200px;
            line-height: 200px;
            display: block;
            float:left;
        }
        #my .link{
            width:89%;
            height:60px;
            /* background:yellow; */
            margin:18px auto 0;
        }
        #my .link a{
            display: block;
            width:16.66666666%;
            float:left;
            height:30px;
            line-height:30px;
            color:blue;
            /* background-color: blue; */
            text-align: center;
        }
        #my .list{
            width:89%;
            height:200px;
            margin:0 auto;
            background-color: yellowgreen; 
        }
        #my .list p{
            display: list-item;
            /* list-style: square outside url('./list.svg') */
        }
        #my .time{
            width:87%;
            margin:0 auto;
        }


        #work .title{
            width:100%;
            height:30px;
            line-height: 30px;
            text-align: center;
        }
        #work .title .on{
            color: blue;
        }
        #work .start{
            width:99.8%;
            height:120px;
            background-color: yellow;
            border-left: 1px solid yellow;
            border-radius: 0 35px  0;

        }
        #work .start a{
            display:block;
            width:25%;
            height: 40px;
            line-height: 40px;
            float: left;
            text-align: center;
        }

        @media (max-width: 800px) { 
            body{            
                background-size:100% auto;
            }
        }
    </style>
    
</head>
<body>
    <div id="back"></div>
    <div id="tool">
        <div class="new" font-color="black">新闻</div>
        <div class="work" color="rgb(85,16,56)">工作台</div>
        <div class="my" color="red">我的</div>
    </div>
    <div id="new">
        <div class="title">
            <span>国内</span>
            <span>国外</span>
        </div>
        <div class="cctv">新闻联播</div>        
        <div class="active">
            <p>正在搜所中  Q......</p>
        </div>
    </div>
    <div id="work">
        <div class="title">
            <span sort="help">使用说明书</span>
            <span sort="" class="on">机械</span>
            <span sort="money">金融</span>
            <span sort="set">更多</span>
        </div>
        <div class="start">
            <a href="">GB/T标准 </a>
            <a href="">CAD/CAM/CAE</a>
            <a href="">PLC控制</a>
            <a href="">数控机床</a>
            <a href="">工程力学</a>
            <a href="">维修技术</a>
            <a href="">钳工工艺</a>
            <a href="">材料料号</a>
            <a href="">模具结构</a>
            <a href="">热处理工艺</a>

           
        </div>
        <div></div>
    </div>
    <div id="my">
        <div class="title">
            <img class="pic" src="./pic.jpg" alt="头像">
            <span class="name">用户名</span>
            <span class="set">消息</span>
        </div>
        <div class="link">
            <a href="http://520you.club" >我的博客</a>
            <a href="https://github.com/Memorykill/">我的开源</a>
            <a href="www.baidu.com" >度娘</a>
            <a href="https://www.w3school.com.cn/" >W3cschool</a>
            <a href="https://netease-music.fe-mm.com/" >音乐网</a>
            <a href="https://www.npmjs.com/" >npm</a>
            <a href="http://nodejs.cn/">nodejs</a>
        </div>
        <div class="list">
            <p>模具设计</p>
            <p>金融学</p>
            <p>网页设计</p>
            <p>证书考试</p>
            <p>心情散记</p>
          
        </div>
        <div class="time">
            <p>最近用户很活跃!</p>
        </div>
    </div> 

    <script>
       function main(){
           var dog=document.getElementById("tool");
           var news=dog.getElementsByClassName("new")[0];
           var work=dog.getElementsByClassName("work")[0];
           var my=dog.getElementsByClassName("my")[0];
           function nShow(){
               document.getElementById("new").style.display="none";
               document.getElementById("work").style.display="none";
               document.getElementById("my").style.display="none";
           }
           news.onclick=()=>{        nShow();        document.getElementById("new").style.display="block";   }
           work.onclick=()=>{        nShow();        document.getElementById("work").style.display="block";   }
           my.onclick=()=>{        nShow();        document.getElementById("my").style.display="block";   }
           //↑ main tab ↑
           
          
       }
       main();
       function tool(data){
           this.father=document.getElementById("work");
            this.data=data;
            this.state={
                title:0,
                start:0,
            }
            this.showTitle=function(a){
               for(let i=0;i<this.data.work.title.length;i++){
                    let el=document.createElement("span");
                    i==0?el.className="on":null;
                    el.style.sort=this.data.work.title[i].href;
                    this.father.getElementsByClassName("title")[0].appendChild(el);
                    console.log(el);
                    // this.father.getElementsByClassName("title")[0].getElementsByTagName("span")[i].innerHTML=this.data.workk.title[i].title
               }
            }    
            this.start=()=>{
                this.showTitle();
            }       
       }
       var data={
                work:{
                    title:[
                        {title:"帮助文档",href:"help"},
                        {title:"模具设计与制造",href:"make"},
                        {title:"money",href:"money"},                       
                    ],
                }
      }
       var work=new tool(data);
       work.start();


    </script>
</body>
</html>